<template>
	<view class="area">
		<view class="epidemic">
			<view class="epidemic-content">
				<view class="time">
					截止至{{time}}时，全国疫情:
				</view>
				<view class="epid-level">
					<view class="epid-level-high">
						<view class="high-num">
							<text>{{areaInfo.high_count}}</text>个
						</view>
						<view>
							高风险等级地区
						</view>
					</view>
					<view class="epid-level-middle">
						<view class="middle-num">
							<text>{{areaInfo.middle_count}}</text>个
						</view>
						<view>
							中风险等级地区
						</view>
					</view>
				</view>
				
				<view class="epid-toast1">
					其余未列出地区均为低风险。
				</view>
				<view class="epid-toast2">
					由国家卫生健康委每日汇总各地报送疫情风险等级
					数据。
				</view>
			</view>
		</view>
		<view class="epidemic-area">
			<view class="middle-title">
				●中风险地区
			</view>
			<view class="middle-item"  v-for="(item,index) in areaInfo.middle_list" :key="index">
				<view class="item-name">
					{{item.area_name}}
				</view>
				<view class="item-info">
					<text class="item-address">{{item.communitys[0]}}</text>
					<text class="item-level">中风险</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"Area",
		data() {
			return {
				
			};
		},
		computed: {
			time() {
				return this.areaInfo.updated_date.split('').splice(0,13).join('')
			}
		},
		props: ['areaInfo'],
		mounted() {
			console.log(this.areaInfo);
		}
	}
</script>

<style lang="less" scoped>
	.epidemic {
		padding: 0 70rpx;
		.epidemic-content {
			// border: 1px solid #333;
			// background: #e0e0e0;
			padding: 20rpx;
			margin: 30rpx 0;
			box-shadow:  1px 1px 10px #bebebe,
			             -1px -1px 5px #ffffff;
			.time {
				font-size: 26rpx;
				font-weight: bolder;
				color: #333;
				margin: 10rpx 0;
			}
			
			.epid-level {
				display: flex;
				padding: 10rpx 0;
				margin: 20rpx 0;
				border-top: 1rpx solid #cecece;
				border-bottom: 1rpx solid #cecece;
				& > view {
					width: 50%;
					margin: 20rpx 0;
					text-align: center;
					color: #333;
				} 
				.epid-level-high {
					
					border-right: 1rpx solid #cecece;
					.high-num {
						text {
							color: red;
							font-size: 34rpx;
							font-weight: bolder;
						}
					}
					
				}
					.epid-level-middle {
						.middle-num {
							text {
								color: orange;
								font-size: 34rpx;
								font-weight: bolder;
							}
						}
				}
			}
			
			.epid-toast1 {
				font-weight: bolder;
				color: #333333;
				font-size: 26rpx;
			}
		}
	}
	.epidemic-area {
		padding: 0 70rpx;
		.middle-title {
			color: orange;
			font-size: 30rpx;
			font-weight: bold;
		}
		.middle-item {
			margin: 20rpx auto;
			box-shadow:  1px 1px 10px #bebebe,
			             -1px -1px 5px #ffffff;
			.item-name {
				color: #333333;
				font-size: 26rpx;
				padding: 20rpx 0rpx;
				margin: 0 20rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #cecece;
			}
			.item-info {
				display: flex;
				padding: 20rpx 0rpx;
				margin: 0 20rpx;
				justify-content: space-between;
				.item-level {
					color: orange;
				}
			}
		}
	}
</style>
